document.write(`\t<Link rel="stylesheet" type="text/css" href="style/index.css" />`);


// component("组件名", 组件定义) 组件函数
// 组件名: myCom => 使用时使用松散命名<my-com>
// vue 组件的页面元素必须是单根节点
Vue.component("bbs",{
    template:`
<div>
    <div class="header">
        <DIV class="logo">
            <img src="image/logo.gif">
        </DIV>
        <!--      用户信息、登录、注册        -->

        <DIV class="h">
            <div class="login" v-if="myinfo==null">
                您尚未　<a href="login.html">登录</a>
                &nbsp;| &nbsp;
                <A href="reg.html">注册</A> |
            </div>
            <div class="login" v-else style="display: flex; align-items: center; gap: 10px">
                欢迎:{{myinfo.uname + myinfo.active ? '活跃用户' :''}}
                <el-avatar size="small" 
                :src="myinfo.head.startsWith('http')
                 ? myinfo.head : 
                 ('image/head/' + myinfo.head)"></el-avatar>
                 <a href="在线聊天.html">在线聊天</a>
                &nbsp;| &nbsp;
                <a href="forgetUPass.html">忘记密码</a>
                &nbsp;| &nbsp;
                <a href="login.html">修改密码</a>
                &nbsp;| &nbsp; 
                <el-button type="text" @click.prevent="getQuestion" style=" color: #2f5fa1; font-size: 12px;">设置私密问题</el-button>
                
                <el-dialog title="私密问题" :visible.sync="dialogFormVisible">
                    <el-form :model="form">
                        <el-form-item label="问题1" :label-width="formLabelWidth">
                            <el-input v-model="form.q1" autocomplete="off" :placeholder="'例如:' + exaQuestion.q1"></el-input>
                        </el-form-item>
                        <el-form-item label="答案1" :label-width="formLabelWidth">
                            <el-input v-model="form.a1" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="问题2" :label-width="formLabelWidth">
                            <el-input v-model="form.q2" autocomplete="off" :placeholder="'例如:' + exaQuestion.q2"></el-input>
                        </el-form-item>
                        <el-form-item label="答案2" :label-width="formLabelWidth">
                            <el-input v-model="form.a2" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="问题3" :label-width="formLabelWidth">
                            <el-input v-model="form.q3" autocomplete="off" :placeholder="'例如:' + exaQuestion.q3"></el-input>
                        </el-form-item>
                        <el-form-item label="答案3" :label-width="formLabelWidth">
                            <el-input v-model="form.a3" autocomplete="off"></el-input>
                        </el-form-item>
                    </el-form>
                        <div slot="footer" class="dialog-footer">
                            <el-button @click="dialogFormVisible = false">取 消</el-button>
                            <el-button type="primary" @click="uploadQuestion()">确 定</el-button>
                        </div>
                </el-dialog> 
                &nbsp;| &nbsp;                
                 <el-dropdown>                 
                    <span class="el-dropdown-link">
                    下拉菜单<i class="el-icon-arrow-down el-icon--right"></i>
                    </span>
                    <el-dropdown-menu slot="dropdown" type="">
                     <el-dropdown-item v-for=" (t, index) in topic"  :key="" @click.native="getDepartment(t.tid)">{{t.topic.title}}&nbsp;&nbsp;&nbsp;&nbsp;<a @click.prevent.stop="deleteStoreByTid(index, t.tid)">删除</a></el-dropdown-item>                    
                    </el-dropdown-menu>
                 </el-dropdown>
                 &nbsp;| &nbsp;
                <A href="user/logout">退出</A> |
                
                
                
            </div>
        </DIV>
    </div>
    <main>
        <div class="content">
            <slot></slot>
        <div/>
    <main/>
    <BR/>
    <CENTER class="gray">源辰信息</CENTER>
</div>
    `,
    data(){
        return {
          myinfo:null,
          dialogFormVisible : false,
          topic:{},
          form: {
                q1:'',
                a1:'',
                q2:'',
                a2:'',
                q3:'',
                a3:'',
          },
          exaQuestion:{},
          formLabelWidth : '120px',
            value:'',

        };
    },
    // 创建钩子函数
    created(){
        // axios 是异步请求
        axios.get("user/myinfo")
            .then(res=> {
                this.myinfo = res.data.data;
                this.getStore();
            });
    },
    methods:{
        uploadQuestion(){
            let p = new URLSearchParams();
            p.append("q1", this.form.q1);
            p.append("a1", this.form.a1);
            p.append("q2", this.form.q2);
            p.append("a2", this.form.a2);
            p.append("q3", this.form.q3);
            p.append("a3", this.form.a3);
            p.append("uname", this.myinfo.uname);
            axios.post("user/question", p).then(res=>{
                if (res.data.code == 1) {
                    this.$message("添加成功")
                    this.dialogFormVisible = false;
                }else{
                    this.$alert(res.data.msg)
                }
            })
        },
        getQuestion(){
            this.dialogFormVisible = true
            axios.post("user/getQuestion").then(res=>{
                this.exaQuestion = res.data.data
            })
        },
        getStore(){
            let p = new URLSearchParams();
            p.append("id", this.myinfo.id);
            axios.post("store/getStore", p).then(res=> {
                this.topic = res.data
            })
        },
        getDepartment(tid){
            location.href = "detail.html?id=" + tid
        },

        deleteStoreByTid(index, tid){
            let p = new URLSearchParams();
            p.append("id", this.myinfo.id);
            p.append("tid", tid);
            axios.post("store/deleteStoreByTid", p).then(res=> {
                console.log(this.topic)
                this.topic.forEach(t=>{
                    // 由于我们直接修改了数据源，Vue 会自动更新 DOM
                    // 修改数据源 splice方法 splice(start, num)
                    this.topic.splice(index, 1);
                })
            })
        }

    },

    // 计算属性
    computed:{},
    // 第一次渲染的钩子函数
    mounted(){},
    // 第N次渲染的钩子函数
    updated(){}

})